<script type="text/javascript" src="http://codenote.file.alimmdn.com/js/codenote/jquery.min.js"></script> 

<script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<style type="text/css">
*{margin:0px;padding:0px;}
body{}
.but{width:50px;height:50px;background:url('http://codenote.image.alimmdn.com/img/codenote/rtop_1.png');display:block;position:fixed;top:0px;right:0px;}
.but:hover{background:url('http://codenote.image.alimmdn.com/img/codenote/rtop_2.png');}
#hf{width:100%;height:200px;background:rgba(0,0,0,0.5);display:none;}
#hf .con{width:1200px;height:200px;margin:0 auto;position:relative;}
#hf .con .left{position:absolute;top:70px;left:0px;cursor:pointer;}
#hf .con .right{position:absolute;top:70px;right:0px;cursor:pointer;}
#hf .con .scroll{width:1080px;height:200px;
overflow:hidden;margin:0 auto;position:relative;}
#hf .con .scroll .scrollCon{width:1000%;height:200px;position:absolute;left:0px;top:0px;}
.scroll .scrollCon ul li{list-style:none;width:240px;height:140px;border:3px solid #fff;float:left;margin-left:12px;margin-right:12px;margin-top:20px;cursor:pointer;}
</style>
<style> 
a:hover {
    text-decoration: none;
}
</style> 


<a href="#" class="but" style="position:absolute;z-index:112"></a>
<div id="hf" style="position: absolute; z-index: 111;">
	<div class="con"  >
		<img src="http://codenote.image.alimmdn.com/img/codenote/left.png" class="left"/>
		<img src="http://codenote.image.alimmdn.com/img/codenote/right.png" class="right"/>
		<div class="scroll">
			<div class="scrollCon"  >
				<ul>
					<li class="tag" id="default" style="margin-left:15px"><img width="240px" height="140px"  src="http://staticstore.image.alimmdn.com/codenote_theme_activeness3/common/tmp_3259.jpg@240w_140h_90Q.jpg"/></li>
					<li class="tag" id="activeness" style="margin-left:15px"><img width="240px" height="140px" src="http://staticstore.image.alimmdn.com/codenote_theme_activeness3/common/xrkjh.jpg@240w_140h_90Q.jpg"/></li>
					<li class="tag" id="air" style="margin-left:15px"><img width="240px" height="140px"  src="http://wx2.sinaimg.cn/mw690/005LmDmFgy1fr59runcb0j306o03wdg2.jpg"/></li>
					<li class="tag" id="society" style="margin-left:15px"><img  width="240px" height="140px" src="http://wx3.sinaimg.cn/small/005LmDmFgy1fr5cvp3s0wj31kw11jh5c.jpg"/></li>
					<li class="tag" id="default" style="margin-left:15px"><img  width="240px" height="140px" src="http://staticstore.image.alimmdn.com/codenote_theme_activeness3/common/tmp_3259.jpg@240w_140h_90Q.jpg"/></li>
 
				</ul>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
<!-- ������������� -->
$(".but").click(function(){
	$("#hf").slideToggle("slow");  
});

<!-- �����߰�ť -->
var click_num=0; //��ʼ�������
var click_num2=0;
$(".left").click(function(){
	click_num++;       //click_num+1
	//if(click_num>2){
	//	click_num=0;
	//}
	$(".scrollCon").animate({left:click_num*(270)},200);
});
$(".right").click(function(){
	click_num--;       //click_num+1
	//if(click_num<0){
	//	click_num=2;
	//}
	$(".scrollCon").animate({left:click_num*(270)},200);
});

$(".tag").click(function(){
 var val=$(this).attr("id");
 //alert(val);
  
$.cookie('theme', val, { path: "/"}); 
location.reload();

});
</script>


